网站设计里的整齐感，是12列栅格和8点基数算出来的

画布起 1440，内容区锁 1200，两侧各留 120

起稿宽度别用 1920。屏幕分辨率是 1920，可浏览器视口要减掉滚动条和窗口边框，实际常见值落在 1536 到 1440 之间；用 1920 起稿的人几乎都会不自觉地把导航和横幅铺满整条边，等切到 1440 的机器上打开，两侧的呼吸空间就没了。画布定 1440，内容区定 1200，左右各 120 的外边距，这是目前最省事的一组数。选 1200 还有个纯计算上的理由：它能被 12 整除得到 100，后面所有跟列宽有关的心算都不用掏计算器。做网站设计时如果客户明确说主力客群还在用 1366 的老机器，把内容区收到 1140，边距按 113 处理，其余规则一概不变。

12 列不是审美偏好，是因为它能被 2、3、4、6 整除

页面上最常出现的分栏方式是两栏、三栏、四栏和六栏。12 列能干净地拆成 6+6、4+4+4、3+3+3+3、2+2+2+2+2+2，一个小数点都不产生。换成 10 列，三栏卡片就要摊成 3.33 列，前端只能自己凑一个百分比，凑出来的值在不同浏览器上舍入方向还不一样，卡片右边缘会差一两个像素。图文左右排布也别习惯性对半分，网站设计里更常用的是 8+4 或 7+5，把大图放在 8 那一侧，文字压在 4 那一侧，视觉重心一偏，读者的视线落点就固定了，比两边等宽更容易读下去。

水槽取 24，列宽正好是 78 这个整数

12 列之间有 11 道水槽。内容区 1200、水槽 24 时，列宽是（1200 − 11×24）÷ 12 = 78，正整数。换成水槽 20，算出来是 81.67；换成 32，是 70.67，两个都带小数。带小数不是不能用，但意味着标注稿上每一列的宽度都要写成近似值，开发按四舍五入落地，一行四张卡片累计下来就会偏出 2 到 3 个像素。所以这三个数是连着定的：内容区 1200、水槽 24、列宽 78。另外提醒一句，卡片内部的内边距不要也写 24。内外相等时，两张卡片之间的缝隙看上去会比卡片里的留白还紧，画面显得发闷，把内边距提一档到 32 就正常了。

纵向所有数值只许落在 8 的倍数上

横向靠栅格约束，纵向靠一把刻度尺。可用值只留 8、16、24、32、48、64、96 这几档，小于 8 的微调允许用 4。段落之间 16，小标题距上文 48、距下文 16，模块与模块之间 96，卡片内元素之间 8 或 16。字号同样列成一档一档的：正文 16、辅助文字 14、小标题 20、区块标题 32、首屏主标题 40，行高取字号的 1.5 到 1.75 倍后向上取整到 4 的倍数。检验办法很直接：把设计稿里出现过的纵向间距值全部导出来数一遍，超过 12 种就说明手感在替你做决定。压到 6 到 8 种，页面的节奏感立刻就出来了，这一步在网站设计里的性价比比调色高得多。

断点只留三档，多一档就多一轮联调

1200 以上走完整 12 列；768 到 1199 之间切 8 列，三栏卡片降成两栏，导航折成汉堡菜单；768 以下不必再谈列数，直接单列堆叠，只保留 16 的左右边距和那把纵向刻度尺。真需要照顾平板横屏，中间补一档 992，到此为止。见过定了六档断点的项目，每多一档，设计要多出一套稿、前端多写一段媒体查询、测试机型翻一倍，一个八页的站点凭空多出十几个小时的联调，而线上真正跑在那两个中间档位上的访问量往往不到 3%。

正文别铺满 12 列，限到 7 列大约 690

栅格是用来对齐的，不是用来把每个元素都撑满的。16 像素的中文正文在 1200 宽的容器里一行能塞下七十多个字，读者的眼睛从行尾扫回行首时会频繁跳错行。舒服的区间是一行 36 到 42 个字，换算成宽度是 600 到 680。栅格里正好有个现成的档位：7 列等于 7×78 + 6×24 = 690，几乎不用另算。文章页、政策条款页、产品说明页都按这个宽度收，右侧空出来的 5 列可以放目录、联系入口，或者干脆留白。背景色块、通栏大图这类元素允许出血到画布两端，但它们内部的文字必须回到 1200 的内容区里对齐，不然整页的左边缘就断了。

交付前自查一次：全站左边缘不超过 3 种取值

在设计工具里把版面栅格开出来（列数 12、水槽 24、边距 120、拉伸对齐），一页页叠上去看。重点不看中间，看左边缘。常见的翻车样子是这样的：横幅里的标题左边距 118，下面卡片区 120，页脚版权行 124。三个值最多差 6 个像素，任何人第一眼都指不出问题，只会觉得这页「有点松散」。把每屏元素的左边缘 x 值抄成一列，全站超过 3 种取值就得回去改。这个自查十分钟能做完一套八页的稿子，是网站设计交付前最划算的一道工序。顺带检查纵向：相邻两个模块之间的距离如果一个 90 一个 96，统一到 96。

给开发的不是「看着来」，是一张数值表

标注稿之外单出一页表，A4 一张写得完：容器宽 1200、列数 12、水槽 24、列宽 78、外边距 120、移动端边距 16、断点 1200 与 768、间距刻度 4/8/16/24/32/48/64/96、字号刻度 14/16/20/24/32/40、圆角 4 与 8 两档、投影两档。有了这张表，开发能先把这些值写成变量再动手写页面，后续加新页面时不用回来问。没有这张表，每个页面都会被单独量一遍，量的人不同、取整方向不同，页面之间就开始漂。按一个八页站点估，这张表通常能省掉十五到二十条「这里差几个像素」的返工记录。

有两类页面栅格会失效，这时候要让它降级

第一类是数据密集的表格页。表格列宽由内容长度决定，型号列可能只要 60，备注列要 300，硬套 12 列会把短列拉宽、长列挤窄，数字反而更难对照。这种页面把栅格降级使用：只管容器的左右边距和行高节奏，列宽交给表格自己按内容分配，但单元格内边距仍然守 8 的倍数。第二类是卡片瀑布流。假设卡片固定宽 280、间距 24，1200 的容器里能放四张（4×280 + 3×24 = 1192，余 8 像素），可 12 列四等分每份只有 270，比卡片窄 10 像素，硬对反而对不上。这时候放弃列数，改用「固定卡片宽 + 容器能塞几张就几张」的算法，只保证卡片之间的间距和外层边距仍取自那把刻度尺——栅格管不到的地方，让间距刻度接着管，网站设计的一致性就是靠这两层兜底撑住的。